* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    --card-background-color: #252525;
    --time-box-width: 200px;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background-color: #242424;
}

#app {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 5rem;
}
.time {
    position: relative;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    width: var(--time-box-width);
    height: var(--time-box-width);
    border-radius: 50%;
    color: var(--color);
    background-color: var(--card-background-color);
    letter-spacing: 0.1rem;
}
.time h2 {
    font-size: 2.5rem;
}
.time span {
    font-size: 0.8rem;
}
/* 伪元素作为表盘 */
.time::before {
    content: "";
    position: absolute;
    /* 拟态效果 */
    inset: -1.5rem;
    border-radius: 50%;
    box-shadow: 1.5rem 1.5rem 4rem rgba(0, 0, 0, 0.25), 1rem 1rem 2rem rgba(0, 0, 0, 0.25),
        inset 0.3rem 0.3rem 0.7rem rgba(0, 0, 0, 0.5), inset 0.3rem 0.3rem 1.5rem rgba(255, 255, 255, 0.2),
        inset -0.3rem -0.3rem 1rem rgba(0, 0, 0, 0.75);
    color: var(--color);
}

/* 表盘刻度 */
.dots {
    position: absolute;
    inset: 0;
}
.dot {
    position: absolute;
    top: 50%;
    display: block;
    width: 0.5rem;
    height: 0.2rem;
    /* 子元素围成圆，元素旋转中心要为父元素的中心 */
    transform-origin: calc(var(--time-box-width) / 2);
    /* 子元素旋转围成圆 */
    transform: rotate(var(--deg));
    background-color: #434343;
}
/* 通过给 active 类添加样式，表明刻度进度 */
.dot.active {
    background-color: var(--color);
}

/* 准点时刻的刻度加长 */
#hour .dot:nth-child(3n + 1) {
    width: 0.8rem;
}
#minute .dot:nth-child(5n + 1) {
    width: 0.8rem;
}
#second .dot:nth-child(5n + 1) {
    width: 0.8rem;
}
